<template>
  <div class="coupon-box">
    <span class="coupon-label">优惠券：</span>
    <el-select size="mini"
    ref="mySelect"
    v-model="couponId"
    popper-class="coupon-popper"
    placeholder="不使用优惠券"
    no-data-text="暂无可用优惠券"
    @change="onCouponChange">
      <el-option v-for="item in usageCouponList"
        :key="item.c_id"
        :value="item.c_id"
        :label="`￥${moneyToyuan(item.amount)} - ${item.name}`"></el-option>
    </el-select>
    <span class="receive-coupon" @click="toCouponPage">去领券</span>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getUsageCouponList } from '@/api/coupon'
export default {
  name: 'CouponSelect',
  props: {
    value: Object,
    product: Object,
    pkgId: String,
    openPos: String
  },
  data () {
    return {
      couponId: null,
      couponList: []
    }
  },
  computed: {
    ...mapGetters(['appInfo', 'hasLogin']),
    usageCouponList () {
      return this.couponList.filter(item => item.threshold <= this.product.price)
    },
    isXzMerchant () {
      return this.appInfo.merchant === 'xz'
    }
  },
  watch: {
    currentCoupon (val) {
      this.$emit('change', { ...val })
    },
    usageCouponList (val) {
      this.selectCoupon = val[0] || {}
      this.couponId = this.selectCoupon.c_id || null
      this.onValueChange()
    },
    hasLogin (val, old) {
      if (val) {
        this.getCouponList()
      } else {
        this.couponList = []
      }
    }
  },
  created () {
    this.getCouponList()
    // 场景优惠券，当选择一张券之后，自动刷新并选择刚才的券
    this.$eventBus.$on('scene-coupon-select', this.reloadCouponListAndSelectItem)
  },
  activated () {
    this.getCouponList()
  },
  beforeDestroy () {
    this.$eventBus.$off('scene-coupon-select', this.reloadCouponListAndSelectItem)
  },
  methods: {
    blur () {
      this.$refs.mySelect.blur()
    },
    async reloadCouponListAndSelectItem (val) { // 重新加载优惠券列表并指定一个item
      await this.getCouponList()
      this.selectCoupon = this.usageCouponList.find(item => item.coupon_id === val) || {}
      this.coupon_id = this.selectCoupon.c_id || null
    },
    async getCouponList () {
      if (this.hasLogin) {
        const res = await getUsageCouponList({ p_id: this.pkgId })
        this.couponList = res.data.list || []
      } else if (this.couponList.length) {
        this.couponList = []
      }
    },
    couponLabel (item) {
      return `￥${this.moneyToyuan(item.amount)}-${item.name}（满￥${this.moneyToyuan(item.threshold)}可用）`
    },
    moneyToyuan (val) {
      return parseFloat((val / 100).toFixed(2))
    },
    toCouponPage () {
      if (this.$route.name === 'PayPage') {
        this.$xz('xz_switch_dialog', 'XZMainWindow', true)
        this.$xz('xz_switch_tab', 3)
        this.$xz('xz_switch_dialog', this.openPos, false)
      } else {
        this.$router.push({
          name: 'CouponIndex'
        })
      }
    },
    onCouponChange (val) {
      this.selectCoupon = this.usageCouponList.find(item => item.c_id === val) || {}
      this.onValueChange()
    },
    onValueChange () {
      this.$emit('input', this.selectCoupon)
      this.$emit('chaneg')
    }
  }
}
</script>
<style lang="scss" scoped>
.coupon-box{
  display: flex;
  align-items: center;
  position: relative;
  width: 268px;
  .coupon-label{
    font-size: 12px;
    color: #fff;
  }
  .el-select{
    width: 220px;
    /deep/.el-input .el-input__inner{
      background-color: rgba(#fff, 0.05);
      border: 0;
      padding-right: 70px;
      overflow: hidden;
    }
  }
  .receive-coupon{
    position: absolute;
    right: 28px;
    top: 5px;
    font-size: 12px;
    color: rgba(#F8DE9D, 0.7);
    cursor: pointer;
    &:hover{
      color:#F8DE9D
    }
  }
}
</style>
